<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    <style>
        td {
            vertical-align: middle !important;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加</h3>
            </div>
            <div class="panel-body form-inline">
                <label for="">id：<input type="text" class="form-control" v-model="id"></label>
                <label for="">name：<input type="text" class="form-control" v-model="name" @keyup.f2="add"></label>
                <label for=""><input type="button" value="添加" class="btn btn-primary" @click="add"></label>
                <label for="">搜索：<input type="text" class="form-control" v-model:value="key" v-focus></label>
            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 -->
                <!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 -->
                <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 -->
                <tr v-for="item in search(key)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td v-text="item.name"></td>
                    <td v-color="'red'">{{ item.ctime | DateFormat1("yyyy-MM-dd hh:mm")}}</td>
                    <td>
                        <button type="button" class="btn btn-danger" @click.prevent="del(item.id)">删除</button>
                        <!-- <a href="" @click.prevent="del(item.id)">删除</a> -->
                    </td>
                </tr>
            </tbody>
        </table>

        <div v-font-size>
            {{msg}}
        </div>
    </div>

    <script>
        // 第一个参数， 过滤器接受的数据
        Vue.filter("过滤器名称", function(data) {
            return data + 123
        })
        Date.prototype.format = function(fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }
        Vue.filter("DateFormat", function(dateString, formatString = "yyyy-MM-dd") {
            var dt = new Date(dateString)
                /* var y = dt.getFullYear()
                var d = dt.getDate()
                var m = dt.getMonth() + 1

                if (formatString.toLowerCase() === "yyyy-mm-dd") {
                    return `${y}-${m}-${d}`
                } else {
                    var hh = dt.getHours()
                    var mm = dt.getMinutes()
                    var ss = dt.getSeconds()
                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                } */
            return dt.format(formatString)
        })

        // 按键修饰符
        Vue.config.keyCodes = {
            f2: 113
        }

        // 定义全局指令，参数1是指令名称，不需要添加v-，但是使用的时候需要加上v-
        Vue.directive("focus", {
            inserted(el) {
                el.focus()
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                brands: [{
                    id: 1,
                    name: "宝马",
                    ctime: new Date(),
                }, {
                    id: 2,
                    name: "奔驰",
                    ctime: new Date(),
                }],
                name: "",
                id: "",
                key: "",
                msg: "hahah"
            },
            methods: {
                add() {
                    if (this.id in this.brands) {
                        alert("ID已存在")
                        return
                    }
                    if (this.id == "" || this.name == "") {
                        alert("请输入正确的信息")
                        return
                    }
                    this.brands.push({
                        id: this.id,
                        name: this.name,
                        ctime: new Date(),
                    })
                    this.id = this.name = ""
                },
                del(id) {
                    console.log(id)
                    this.brands.some((item, i) => {
                            if (item.id == id) {
                                this.brands.splice(i, 1)
                                return true
                            }
                        })
                        /*  var index = this.brands.findIndex(item => {
                             if (item.id == id) {
                                 return true
                             }
                         })
                         this.brands.splice(index, 1) */
                },
                search(key) {
                    var newList = []
                        /* this.brands.forEach(item => {
                            if (item.name.indexOf(key) != -1) {
                                newList.push(item)
                            }
                        });
                        return newList */
                    newList = this.brands.filter(item => {
                        // if (item.name.indexOf(key) != -1) {
                        if (item.name.includes(key)) {
                            return item
                        }
                    })
                    return newList
                }
            },
            filters: {
                DateFormat1: function(dateString, formatStr = "") {
                    var dt = new Date(dateString)
                    return dt.format(formatStr)
                },
            },
            // 私有指令
            directives: {
                color: {
                    inserted(el, binding) {
                        el.style.color = binding.value
                    }
                },
                // 简写  在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：
                'font-size' (el) {
                    el.style.fontSize = "50px"
                }
            }
        });
    </script>
</body>

</html>